---
title: Element menu
image: /images/user-guide/kanban-views/kanban.png
---

<Frame>
  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
</Frame>

Wszechstronny element menu zaprojektowany do użycia w menu lub liście nawigacyjnej.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Właściwości (Props) | Typ            | Opis                                                                                                                         |
| -------------------------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| LewaIkona                              | KomponentIkony | Opcjonalna lewa ikona wyświetlana przed tekstem w elemencie menu                                                             |
| akcent                                 | ciąg znaków    | Określa kolor akcentu elementu menu. Options include: `default`, `danger`, and `placeholder` |
| tekst                                  | ciąg znaków    | Zawartość tekstowa elementu menu                                                                                             |
| ikonyPrzycisków                        | tablica        | Tablica obiektów reprezentujących dodatkowe przyciski ikon związane z elementem menu                                         |
| czyTooltipWidoczny                     | boolean        | Kontroluje widoczność wskazówki związanej z elementem menu                                                                   |
| testId                                 | ciąg znaków    | Atrybut data-testid do celów testowania                                                                                      |
| poKliknięciu                           | funkcja        | Funkcja zwrotna wyzwalana po kliknięciu elementu menu                                                                        |
| nazwaKlasy                             | ciąg znaków    | Opcjonalna nazwa dla dodatkowego stylowania                                                                                  |

</Tab>
</Tabs>

## Warianty

Różne warianty komponentu elementu menu obejmują następujące:

### Komenda

Element menu w stylu komend w menu, wskazujący skróty klawiaturowe.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Właściwości (Props) | Typ            | Opis                                                             |
| -------------------------------------- | -------------- | ---------------------------------------------------------------- |
| LewaIkona                              | KomponentIkony | Opcjonalna lewa ikona wyświetlana przed tekstem w elemencie menu |
| tekst                                  | ciąg znaków    | Zawartość tekstowa elementu menu                                 |
| pierwszySkrótKlawiaturowy              | ciąg znaków    | Pierwszy skrót klawiaturowy powiązany z poleceniem               |
| drugiSkrótKlawiaturowy                 | ciąg znaków    | Drugi skrót klawiaturowy powiązany z poleceniem                  |
| zaznaczony                             | boolean        | Wskazuje, czy element menu jest zaznaczony lub podświetlony      |
| poKliknięciu                           | funkcja        | Funkcja zwrotna wyzwalana po kliknięciu elementu menu            |
| nazwaKlasy                             | ciąg znaków    | Opcjonalna nazwa dla dodatkowego stylowania                      |

</Tab>
</Tabs>

### Przeciągnij

Przeciągany element menu zaprojektowany do użycia w menu lub liście, gdzie elementy mogą być przeciągane, a dodatkowe akcje mogą być wykonywane za pomocą przycisków ikon.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Właściwości (Props) | Typ            | Opis                                                                                              |
| -------------------------------------- | -------------- | ------------------------------------------------------------------------------------------------- |
| LewaIkona                              | KomponentIkony | Opcjonalna lewa ikona wyświetlana przed tekstem w elemencie menu                                  |
| akcent                                 | ciąg znaków    | Określa kolor akcentu elementu menu. Może być 'default', 'placeholder' i 'danger' |
| ikonyPrzycisków                        | tablica        | Tablica obiektów reprezentujących dodatkowe przyciski ikon związane z elementem menu              |
| czyTooltipWidoczny                     | boolean        | Kontroluje widoczność wskazówki związanej z elementem menu                                        |
| naKliknięciu                           | funkcja        | Funkcja zwrotna do uruchomienia po kliknięciu linku                                               |
| tekst                                  | ciąg znaków    | Zawartość tekstowa elementu menu                                                                  |
| isDragDisabled                         | boolean        | Wskazuje, czy przeciąganie jest wyłączone                                                         |
| nazwaKlasy                             | ciąg znaków    | Opcjonalna nazwa dla dodatkowego stylowania                                                       |

</Tab>
</Tabs>

### Wybór wielokrotny

Oferuje sposób na wdrożenie funkcji wielokrotnego wyboru z powiązanym polem wyboru.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Właściwości (Props) | Typ            | Opis                                                                    |
| -------------------------------------- | -------------- | ----------------------------------------------------------------------- |
| LewaIkona                              | KomponentIkony | Opcjonalna lewa ikona wyświetlana przed tekstem w elemencie menu        |
| tekst                                  | ciąg znaków    | Zawartość tekstowa elementu menu                                        |
| wybrany                                | boolean        | Wskazuje, czy element menu jest wybrany (zaznaczony) |
| poZmienChekOpen                        | funkcja        | Funkcja zwrotna uruchamiana podczas zmiany stanu checkboxa              |
| nazwaKlasy                             | ciąg znaków    | Opcjonalna nazwa dla dodatkowego stylowania                             |

</Tab>
</Tabs>

### Multi Select Avatar

Element menu z wielokrotnym wyborem z awatarem, polem wyboru oraz treścią tekstową.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Właściwości (Props) | Typ         | Opis                                                                    |
| -------------------------------------- | ----------- | ----------------------------------------------------------------------- |
| awatar                                 | `ReactNode` | Awatar lub ikona wyświetlana po lewej stronie elementu menu             |
| tekst                                  | ciąg znaków | Zawartość tekstowa elementu menu                                        |
| wybrany                                | boolean     | Wskazuje, czy element menu jest wybrany (zaznaczony) |
| poZmienChekOpen                        | funkcja     | Funkcja zwrotna uruchamiana podczas zmiany stanu checkboxa              |
| nazwaKlasy                             | ciąg znaków | Opcjonalna nazwa dla dodatkowego stylowania                             |

</Tab>
</Tabs>

### Nawiguj

Element menu z opcjonalną lewą ikoną, treścią tekstową oraz ikoną z prawej strony.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Właściwości (Props) | Typ            | Opis                                                             |
| -------------------------------------- | -------------- | ---------------------------------------------------------------- |
| LewaIkona                              | KomponentIkony | Opcjonalna lewa ikona wyświetlana przed tekstem w elemencie menu |
| tekst                                  | ciąg znaków    | Zawartość tekstowa elementu menu                                 |
| poKliknięciu                           | funkcja        | Funkcja zwrotna wyzwalana po kliknięciu elementu menu            |
| nazwaKlasy                             | ciąg znaków    | Opcjonalna nazwa dla dodatkowego stylowania                      |

</Tab>
</Tabs>

### Wybierz

Element menu z możliwością wyboru, z opcjonalną lewą treścią (ikoną i tekstem) oraz wskaźnikiem (ikona zaznaczenia) dla wybranego stanu.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Właściwości (Props) | Typ            | Opis                                                                    |
| -------------------------------------- | -------------- | ----------------------------------------------------------------------- |
| LewaIkona                              | KomponentIkony | Opcjonalna lewa ikona wyświetlana przed tekstem w elemencie menu        |
| tekst                                  | ciąg znaków    | Zawartość tekstowa elementu menu                                        |
| wybrany                                | boolean        | Wskazuje, czy element menu jest wybrany (zaznaczony) |
| wyłączony                              | boolean        | Wskazuje, czy element menu jest wyłączony                               |
| awatar                                 | boolean        | Wskazuje, czy element menu jest obecnie najechany kursorem              |
| naKliknięciu                           | funkcja        | Funkcja zwrotna wyzwalana po kliknięciu elementu menu                   |
| nazwaKlasy                             | ciąg znaków    | Opcjonalna nazwa dla dodatkowego stylowania                             |

</Tab>
</Tabs>

### Wybierz Awatar

Element menu z możliwością wyboru z awatarem, z opcjonalną lewą treścią (awatarem i tekstem) oraz wskaźnikiem (ikona zaznaczenia) dla wybranego stanu.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

```

</Tab>
<Tab title="Props">

| Właściwości (Props) | Typ         | Opis                                                                    |
| -------------------------------------- | ----------- | ----------------------------------------------------------------------- |
| awatar                                 | `ReactNode` | Awatar lub ikona wyświetlana po lewej stronie elementu menu             |
| tekst                                  | ciąg znaków | Zawartość tekstowa elementu menu                                        |
| wybrany                                | boolean     | Wskazuje, czy element menu jest wybrany (zaznaczony) |
| wyłączony                              | boolean     | Wskazuje, czy element menu jest wyłączony                               |
| awatar                                 | boolean     | Wskazuje, czy element menu jest obecnie najechany kursorem              |
| testId                                 | ciąg znaków | Atrybut data-testid do celów testowania                                 |
| poKliknięciu                           | funkcja     | Funkcja zwrotna wyzwalana po kliknięciu elementu menu                   |
| nazwaKlasy                             | ciąg znaków | Opcjonalna nazwa dla dodatkowego stylowania                             |

</Tab>
</Tabs>

### Wybierz kolor

Element menu do wyboru z próbką koloru na scenariusze, w których użytkownicy mają wybrać kolor z menu.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Właściwości (Props) | Typ         | Opis                                                                                                                                                                                                                            |
| -------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| kolor                                  | ciąg znaków | Kolor motywu, który ma być wyświetlany jako próbka w elemencie menu. Opcje obejmują: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow` i `gray`. |
| wybrany                                | boolean     | Wskazuje, czy element menu jest wybrany (zaznaczony)                                                                                                                                                         |
| wyłączony                              | boolean     | Wskazuje, czy element menu jest wyłączony                                                                                                                                                                                       |
| wariant                                | boolean     | Wskazuje, czy element menu jest obecnie najechany kursorem                                                                                                                                                                      |
| wariant                                | ciąg znaków | Wariant próbki koloru. Może to być `default` lub `pipeline`.                                                                                                                                    |
| poKliknięciu                           | funkcja     | Funkcja zwrotna wyzwalana po kliknięciu elementu menu                                                                                                                                                                           |
| nazwaKlasy                             | ciąg znaków | Opcjonalna nazwa dla dodatkowego stylowania                                                                                                                                                                                     |

</Tab>
</Tabs>

### Przełącznik

Element menu z powiązanym przełącznikiem, aby umożliwić użytkownikom włączenie lub wyłączenie określonej funkcji

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Właściwości (Props) | Typ            | Opis                                                              |
| -------------------------------------- | -------------- | ----------------------------------------------------------------- |
| LewaIkona                              | KomponentIkony | Opcjonalna lewa ikona wyświetlana przed tekstem w elemencie menu  |
| tekst                                  | ciąg znaków    | Zawartość tekstowa elementu menu                                  |
| przełączony                            | boolean        | Indicates whether the toggle switch is in the "on" or "off" state |
| zmianaPoPrzełączniku                   | funkcja        | Funkcja zwrotna wyzwalana, gdy stan przełącznika ulega zmianie    |
| rozmiar przełącznika                   | ciąg znaków    | Rozmiar przełącznika. Może być albo \\          |
| nazwaKlasy                             | ciąg znaków    | Opcjonalna nazwa dla dodatkowego stylowania                       |

</Tab>
</Tabs>
